<template>
  <view class="box-item" :style="itemStyle">
    <view class="cover">
      <image class="img" :src="status[has]" mode="widthFix" :lazy-load="true" />
      <view class="num">{{ details.sort }}</view>
    </view>
    <view class="info">
      <view class="remainder">
        本套剩余: {{ details.surplus }} / {{ details.total }}
      </view>
      <view class="silter">
        <view
          class="power"
          :style="
            'transform: translateX(-' +
            (100 - (details.surplus / details.total) * 100) +
            '%);'
          "
        ></view>
      </view>
      <view
        class="tags"
        :class="shadow || again ? 'ing' : ''"
        id="tags"
        @touchmove="touchMove"
        @touchstart="touchStart"
        @touchend="touchEnd"
      >
        <!--  -->
        <view
          class="value"
          id="value"
          :class="again ? 'ing' : ''"
          :style="itemStyle + silterTransform"
        >
          <view
            class="tag-item"
            :class="level[item.level].style"
            v-for="(item, index) in details.reward"
            :key="index"
          >
            <view class="font">
              {{ item.reward_name
              }}<text class="span" :style="level[item.level].value"
                >赏 {{ item.surplus_num }} / {{ item.num }}</text
              >
            </view>
          </view>
          <!-- <view
            class="tag-item"
            :class="item.style"
            v-for="(item, index) in details.reward"
            :key="index"
          >
            <view
              class="font"
              v-html="
                item.reward_name + ' ' + item.surplus_num + '/' + item.num
              "
            ></view>
          </view> -->
        </view>
      </view>
    </view>
  </view>
</template>
<script>
/**
 * 箱子列表 子项
 * @property {Object} details 箱子信息
 *
 *
 */

import has_1 from '../img/up.png';
import none_1 from '../img/down.png';
import { GOOD_TYPE_LIVE } from '../portrait/portait_config';
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    index: {
      type: [String, Number],
      default: 0,
    },
    details: {
      type: Object,
      default: () => ({
        box_id: '',
        total: 0,
        surplus: 0,
        sort: '',
        reward: [],
      }),
    },
  },
  data() {
    return {
      notScroll: false,

      // 箱子状态 图片
      status: [none_1, has_1],
      // 滚动比例
      longRatio: 80,
      // 滑动 滑块值
      slider: 0,

      valueLong: 0,

      // 触碰信息
      touchData: {
        x0: 0,
        x: 0,
        y0: 0,
        y: 0,
      },

      // 商品类型 种类
      level: GOOD_TYPE_LIVE,
      timerScroll: null,
      timerStart: null,
      timerShadow: null,
      // 用户 触碰 滚动
      touchScroll: false,
      // 重来
      again: false,
      // 遮影
      shadow: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    itemStyle() {
      return `animation-delay: ${0.3 * this.index + 1}s;`;
    },
    // 是否还有库存 icon区分
    has() {
      return this.details.status == 2 ? 0 : 1;
    },

    valueWidth() {
      return this.valueLong || 245;
    },

    // 移动距离
    silterTransform() {
      return ` transform: translateX(${this.slider}%);`;
    },
  },
  // 数据监听
  watch: {
    slider(val) {
      this.shadow = true;
      if (this.timerShadow) {
        clearTimeout(this.timerShadow);
      }
      this.timerShadow = setTimeout(() => {
        this.shadow = false;
      }, 1500);
    },
  },
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {
    this.getLong().then(() => {
      this.stratAutoScorll();
    });
  },
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // 获取长度
    getLong() {
      return new Promise((resolve, reject) => {
        const query_tags = uni.createSelectorQuery().in(this);
        query_tags
          .select('#value')
          .boundingClientRect((data) => {
            if (data.width <= 245) {
              this.notScroll = true;
            }
            resolve();
          })
          .exec();
      });
    },

    // 触碰开始
    touchStart(e) {
      if (this.notScroll) return;
      this.touchData = {
        x0: 0,
        x: 0,
        y0: 0,
        y: 0,
      };
      const touche = e.changedTouches[0] || e.touches[0];
      this.touchData.x0 = touche.clientX;

      clearTimeout(this.timerStart);
      this.again = false;
    },
    // 触碰中
    touchMove(e) {
      if (this.notScroll) return;
      const touche = e.changedTouches[0] || e.touches[0];
      if (this.touchData.x0 > touche.clientX) {
        if (this.slider <= 0 - this.longRatio) {
          this.slider = 0 - this.longRatio;
          return;
        }
        this.slider = this.slider - 2;
      } else {
        if (this.slider >= 0) {
          this.slider = 2;
          return;
        }
        this.slider = this.slider + 2;
      }
      this.touchData.x = touche.clientX;
    },
    // 触碰结束
    touchEnd(e) {
      if (this.notScroll) return;
      const touches = e.changedTouches[0];
      this.stratAutoScorll();
    },
    // 自动滚动
    autoScroll() {
      this.again = true;
    },
    // 开始自动滚动
    stratAutoScorll() {
      if (this.notScroll) return;
      this.timerStart = setTimeout(() => {
        // if () { }
        this.again = false;
        this.autoScroll();
      }, 3000);
    },
  },
};
</script>
<style lang="scss" scoped>
view,
img,
image {
  max-width: none;
}
.box-item {
  display: flex;
  justify-content: space-between;
  align-items: center;

  margin-bottom: 15rpx;
  position: relative;
  width: 100%;
  height: 78rpx;
  // opacity: 0;

  // animation: fade 1.4s linear 1s 1 normal forwards;
  .cover {
    flex-shrink: 0;
    position: relative;
    margin-right: 46rpx;
    width: 78rpx;
    height: 78rpx;
    .img {
      width: 100%;
      height: 100%;
    }
    .num {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16rpx;
      position: absolute;
      right: -2rpx;
      bottom: 4rpx;
      width: 22.5rpx;
      height: 20rpx;
      color: #fff;
      border-radius: 7rpx 0rpx 7rpx 0rpx;
      background-image: linear-gradient(
        90deg,
        rgba(12, 226, 213, 1),
        rgba(116, 92, 232, 1)
      );
    }
  }
  .info {
    width: calc(100% - 78rpx - 23rpx);
    position: relative;
    flex-shrink: 0;
    .remainder {
      margin-bottom: 5rpx;
      font-size: 12rpx;
      font-weight: bold;
      color: #b66cde;
    }
    .silter {
      margin-bottom: 8rpx;
      width: 100%;
      height: 10rpx;
      overflow: hidden;
      background: rgba(242, 231, 247, 1);
      border-radius: 20rpx;
      .power {
        width: 100%;
        height: 100%;
        border-radius: 20rpx;
        background-image: linear-gradient(
          90deg,
          rgba(169, 82, 217, 1),
          rgba(116, 92, 232, 1)
        );
        box-shadow: 0 1rpx 4rpx rgba(255, 255, 255, 0.45) inset;
      }
    }
    .tags.ing {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 8rpx;
        height: 16rpx;
        background-image: linear-gradient(90deg, #fff, transparent);
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        width: 8rpx;
        height: 16rpx;
        background-image: linear-gradient(270deg, #fff, transparent);
      }
    }
    .tags {
      display: flex;
      position: relative;
      width: 100%;
      height: 16rpx;
      overflow: hidden;
      line-height: 16rpx;

      .value.right {
        transition: all 1.6s;
      }
      .value.ing {
        animation: slide-in-right 15s linear 0s infinite alternate none;
      }
      .value {
        transform: translateX(0%);
        display: inline-flex;
        align-items: center;
        height: 16rpx;
      }
      .tag-item {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 3rpx;
        margin-right: 8rpx;
        min-width: 50rpx;
        max-width: 100rpx;
        height: 16rpx;
        border-radius: 10rpx 1rpx 10rpx 1rpx;
        background: #eee;
        font-size: 9rpx;
        font-weight: 600;
        &.z {
          background-image: linear-gradient(
            90deg,
            rgba(125, 52, 235, 1),
            rgba(224, 33, 127, 1)
          );
          .font {
            background-image: linear-gradient(
              45deg,
              rgba(246, 225, 30, 1),
              rgba(102, 237, 112, 1),
              rgba(43, 205, 215, 1)
            );
            background-clip: text;
            color: transparent;
            font-size: 9rpx;
            font-weight: 600;
            span {
              font-size: 14rpx;
            }
          }
        }
        &.j {
          background-image: linear-gradient(
            90deg,
            rgba(250, 177, 26, 1),
            rgba(215, 49, 100, 1)
          );
          color: #fff;
          font-size: 8rpx;
        }
        &.s {
          background-image: linear-gradient(
            45deg,
            rgba(246, 225, 30, 1),
            rgba(102, 237, 112, 1),
            rgba(43, 205, 215, 1)
          );
          color: #000;
        }
        &.a {
          background-image: linear-gradient(
            45deg,
            rgba(169, 82, 217, 1),
            rgba(116, 92, 232, 1)
          );
          color: #fff;
        }
        &.b {
          background-image: linear-gradient(
            45deg,
            rgba(252, 115, 225, 1),
            rgba(226, 143, 116, 1)
          );
          color: #fff;
        }
        &.c {
          background: rgba(46, 211, 205, 1);
          color: #fff;
        }
        &.d {
          background: rgba(0, 0, 0, 1);
          color: #fff;
        }
        &.e {
          background: rgba(0, 0, 0, 1);
          color: #fff;
        }
        &.f {
          background: rgba(0, 0, 0, 1);
          color: #fff;
        }
        &.g {
          background: rgba(0, 0, 0, 1);
          color: #fff;
        }
      }
    }
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc((100% - (86vw - 154rpx - 46rpx)) * -1));
  }
}
</style>
